
<!--<input id="redir_edit" type="button" value="利用者人数編集" style="float: right; margin-right: 10px; height: 25px;">-->
<input id="redir_add" type="button" value="活動人数入力" style="float: right; margin-right: 10px; height: 25px; 
    <?php if($this->groupUser == '10' || $this->groupUser == '12') echo 'display: none;' ?>"/>
<input id="a00820" type="button" value="未入力センター・クラブ一覧" style="float: right;margin-right: 10px; height: 25px;">
<?php

$options = array(
    'onActive' => 'function(title, description){
        description.setStyle("display", "block");
        title.addClass("open").removeClass("closed");
    }',
    'onBackground' => 'function(title, description){
        description.setStyle("display", "none");
        title.addClass("closed").removeClass("open");
    }',
    'startOffset' => 0,  // 0 starts on the first tab, 1 starts the second, etc...
    'useCookie' => false, // this must not be a string. Don't use quotes.
);

echo JHtml::_('tabs.start', 'tab_group_id', $options);

echo JHtml::_('tabs.panel', JText::_('グラフ統計'), 'panel_1_id');

?>
 <form action="index.php?option=com_statistic" method="post" name="adminForm" class="adminform" id="adminForm">
    <table id="table_center_top" style="width: 100%;" >
        <tr>
            <td class="text_right" style="width: 5%;">期間</td>
            <td  style="width: 20%;" >
                <select id="period" name="period" class="inputbox smallx">
                <?php
                //Not mean month, but the values is 1-12 so i reuse it
                echo HelperBG::getMonthOption(12);
                ?>
                </select>
                 <select id="period_f" name="period_f">
                    <option value="1">月単位</option>
                    <option value="3">四半期単位</option>
                    <option value="6">半期単位</option>
                    <option value="12">年単位</option>
                </select>
            </td>
            <td class="text_right" style="width: 10%;">次の月を基準として</td>
            <td style="width: 25%;">
                <select name="year" id="year" style="width: 40%;">
                <?php
                echo HelperBG::getYearOption(date('Y'));
                ?>
                </select>
                <select name="month" id="month" style="width: 40%;">
                <?php
                echo HelperBG::getMonthOption();
                ?>
                </select>
            </td>
            <td class="text_right" style="width: 5%;">種別</td>
            <td style="width: 15%;">
                <select name="cc_type" id="cc_type" class="fl-left">
                	<option <?php if($disp = JRequest::getVar('disp') == 'center') echo "selected";?> value="center">センター</option>
                    <option <?php if($disp = JRequest::getVar('disp') == 'club') echo "selected";?> value="club">クラブ</option>
                </select>
            </td>
            <td class="facility text_right" style="width: 5%;">施設</td>
            <td style="width: 15%;">
                 <select id="facility" name="facility" class="fl-left small facility">
                	<option value="all">全施設</option>
                    <option value="all_gym">体育館全て</option>
                    <option value="gym1">第一体育館</option>
                    <option value="gym2">第二体育館</option>
                    <option value="pool">プール</option>
                    <option value="dock">艇庫</option>
                </select>
            </td>

        </tr>
        <tr>
            <td class="text_right">地区</td>
            <td >
                <select id="area" name="area" style="width: 50%;">
                    <option value="all">選択してください</option>
                    <?php
                    foreach($this->area as $row){
                        echo "<option value='$row->AREA_CODE' >$row->AREA_NAME</option>";
                    }
                    ?>
                </select>

            </td>
            <td class="text_right">都道府県</td>
            <td>
                <select id="pref" name="pref" style="width: 40%;">
                    <option value="all">選択してください</option>
                    <?php
                    foreach($this->pref as $row){
                        echo "<option value='$row->PREF_CODE' >$row->PREF_NAME</option>";
                    }
                    ?>
                </select>

            </td>
            <td class="text_right"><span style="margin-top: 0px;" id="lbl_ocba_code">センターコード</span></td>
            <td colspan="3" >
                <input name="ocba_code" id="ocba_code" type="text" class="inputbox medium" >
            </td>
        </tr>
        <tr>
            <td class="text_right"><span style="margin-top: 0px;" id="lbl_ocba_name">センター名</span></td>
            <td colspan="3"><input name="ocba_name" id="ocba_name" class="inputbox" style="width: 95%;"></td>
            <td colspan="4">
                <input id="search_btn" type="button" style=" width: 75px;" value="表示">
                
            </td>
        </tr>
    </table>
    <div id="search_result">

    </div>

    <br /><br /><br /><a style="float: right;" href="#">ページの先頭へ</a><br /><br />
    <input type="hidden" name="task" />
    <input type="hidden" id="csv_data" name="csv_data" />

</form>


 <?php
echo JHtml::_('tabs.panel', JText::_('ランキング'), 'panel_2_id');
?>
<form action="index.php?option=com_statistic&disp=center" method="post" name="adminForm_2" class="adminform">
    <table border=0 id="table_center_top" style="width: 1250px;" >
        <tr>
            <td class="text_right">期間</td>
            <td class="left"  style="width:12%;" >
                <select id="yfrom_2" name="yfrom_2" class="float-left">
                <?php
                echo HelperBG::getYearOption();
                ?>
                </select>
                 <select id="mfrom_2" name="mfrom_2" class="inputbox smallx float-left">
                 <?php
                 echo HelperBG::getMonthOption();
                 ?>
                </select>
            </td>
            <td style="width: 2%;">～</td>
            <td>
                <select id="yto_2" name="yto_2" class="">
                <?php
                echo HelperBG::getYearOption();;
                ?>
                </select>
                 <select id="mto_2" name="mto_2" class="inputbox smallx">
                 <?php
                 echo HelperBG::getMonthOption();
                 ?>
                </select>
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td colspan="3">
                

            </td>
        </tr>
        <tr>
            <td class="text_right">地区</td>
            <td colspan="2">
                <select id="area_2" name="area_2" class="inputbox medium">
                    <option value="all">選択してください</option>
                    <?php
                    foreach($this->area as $row){
                        echo "<option value='$row->AREA_CODE' >$row->AREA_NAME</option>";
                    }
                    ?>
                </select>

            </td>

            <td class="text_right">都道府県</td>
            <td>
                <select id="pref_2" name="pref_2" style="width: 200px;">
                    <option value="all">選択してください</option>
                    <?php
                    foreach($this->pref as $row){
                        echo "<option value='$row->PREF_CODE' >$row->PREF_NAME</option>";
                    }
                    ?>
                </select>

            </td>
            <td class="text_right">施設</td>
            <td colspan="3">
                 <select id="facility_2" name="facility_2" class="fl-left small facility">
                	<option value="all">全施設</option>
                    <option value="all_gym">体育館全て</option>
                    <option value="gym1">第一体育館</option>
                    <option value="gym2">第二体育館</option>
                    <option value="pool">プール</option>
                    <option value="dock">艇庫</option>
                </select>
            </td>
            <td><input id="submit_ranking" type="button" style=" width: 75px;" value="表示"></td>
        </tr>
    </table>
    <div id="ranking_result">
        
    </div>
    <br><br><br>

	<a style="float: right;font-size: 1.091em;" href="#" >ページの先頭へ</a>
    <br><br>

    <input type="hidden" name="task" />

</form>
<?php echo JHtml::_('tabs.end');?>

<script>
    jq(document).ready(function() {
        // show a dialog box when clicking on a link
        jq('#a00820').bind('click', function(e) {
            e.preventDefault();
            jq.Zebra_Dialog('', {
                source:  {'ajax': 'index.php?option=com_popupstatistic&views=bg&task=a00820&tmpl=component'},
                position:  ['center', 'top + 50'],
                width: 550,
                title:  '未入力センター・クラブ一覧',
                type:  '',
                buttons:  [
                    {caption: 'キャンセル', callback: function() {}}

                ]
            });
        });

        jq('#redir_edit').click(function(){
            if(jq('#ocba_code').val()==''){
               alert('ocba_code is empty!');
               return;
            }

            var params = "&month="+jq('#month option:selected').val()
                        +"&year="+jq('#year option:selected').val()
                        +"&ocba="+jq('#ocba_code').val();
            window.location.href = "index.php?option=com_statistic&disp="+jq('#cc_type option:selected').val()+"&task=form"+params;
        });

        jq('#redir_add').click(function(){
            window.location.href = "index.php?option=com_statistic&disp="+jq('#cc_type option:selected').val()+"&task=form";
        });

        //disable some button on switch tabs
        jq('.panel_1_id').click(function(event){
            jq('#toolbar-print').show();
            if(jq('#cc_type option:selected').val() == 'center')
                jq('#toolbar-stats').show();
        });
        jq('.panel_2_id').click(function(event){
            jq('#toolbar-print').hide();
            jq('#toolbar-stats').hide();
        });

        //switch between center and club
        jq('#cc_type').change(function(event){
            if(jq('#cc_type option:selected').val() == 'club'){
                jq('#lbl_ocba_code').html('クラブコード') ;
                jq('#lbl_ocba_name').html('クラブ名');
                jq('.facility').hide();
                jq('#toolbar-stats').hide();
            } else {
                jq('#lbl_ocba_code').html('センターコード');
                jq('#lbl_ocba_name').html('センター名');
                jq('.facility').show();
                jq('#toolbar-stats').show();
            }
        });
        
        jq('#period_f').change(function(event){
            if(jq('#period_f').val() == '1'){
                jq('#month').val('01');
                jq('#month').show('normal');
                
            } else {
                jq('#month').val('04');
                jq('#month').hide();
            }
        });

        //ajax call for load prefs on change area
        jq('#area').change(function(event){
            jq('#pref').load('index.php?option=com_statistic&task=ajax_get_pref&tmpl=component&area_code='+jq('#area').val());
        });
        
        jq('#area_2').change(function(event){
            jq('#pref_2').load('index.php?option=com_statistic&task=ajax_get_pref&tmpl=component&area_code='+jq('#area_2').val());
        });

        //ajax call for load search result
        jq('#search_btn').click(function(event){
            search_statistic();
        });
        
        //ajax ranking
        jq('#submit_ranking').click(function(event){
            submit_ranking();
        });
        

     });
     
     //Convert html table to csv string
     function table2csv(table){
        var arr = [];
        table.children('tbody').each(function(){
            jq(this).children('tr').each(function(){
                var tmp = [];
                jq(this).children('th, td').each(function(){
                    tmp.push(jq(this).text());
                });
                arr.push(tmp);
            });
            
        });
        
        var csv = [];
        var i = 0;
        jq(arr).each(function(k, v) {
            var row = v.join(",");
            csv.push(row);
        });        
        //csv = encodeURIComponent(csv.join("\r\n"));
        csv = csv.join("\r\n");
        
        return csv;
    }
    
    //inverse 2 dimensional array
    function rows2cols(a) {
      var r = [];
      var t;
    
      for (var i=0, iLen=a.length; i<iLen; i++) {
        t = a[i];
    
        for (var j=0, jLen=t.length; j<jLen; j++) {
          if (!r[j]) {
            r[j] = [];
          }
          r[j][i] = t[j];
        }
      }
      return r;
    }

    //Submit form (Joomla submit)
    Joomla.submitbutton = function(task){
	   if(task == 'char'){
	       var tmpl = "<div id='chart_content' style='max-height: 450px; overflow: auto;'> "+
                        "<h2> 使用者人数集計 (グラフ統計)<\/h2> "+
                        "<div id='chart_div' style='height: 500px;'><\/div> "+
                        "<br><br> "+
                        "<div id='chart_table' style='text-align: center;'><\/div> "+
                        "<br> "+
                        "<a style='float: right;' href='#chart_content' >ページの先頭へ<\/a> "+
                    "<\/div> ";
            jq.Zebra_Dialog(tmpl, {
                height: 800,
                width: 1000,
                title:  '活動人数',
                type:  '',
                buttons:  [
                    {caption: 'キャンセル', callback: function() {}}
                ]
            });
            
            search_statistic(drawVisualization)
            //drawVisualization();
            
            
            
	   } else if(task == 'print'){
            window.print();
	   } else if (task == 'export'){        
            
            if(jq('.panel_1_id').hasClass('open')){
                search_statistic(function(){
    	            jq('#csv_data').val(table2csv(jq('#table_center')));
                    if(jq('#csv_data').val() == '')
                        return;
        	        Joomla.submitform(task, document.getElementById('adminForm'));
    	        });
            } else {
                submit_ranking(function(){
    	            jq('#csv_data').val(table2csv(jq('#ranking_table')));
        	        Joomla.submitform(task, document.getElementById('adminForm'));
    	        });
            }
            
	   } else
            Joomla.submitform(task, document.getElementById('adminForm'));
            
    }

    //draw chart
    function drawVisualization() {
        
        arr = new Array();
        result = JSON.parse(jq('#char_data').html());
        var data = google.visualization.arrayToDataTable(result.chart_data);
        var view = new google.visualization.DataView(data);
            
        var count = result.chart_num_col;
        var mode = result.chart_disp;
        var s = {};
        if(mode == 1){
            s[count-2] = {type: "line"};
            view.hideColumns([count-1]);
    
        } else if(mode == 2){
            s[count-2] = {type: "line"};
            s[count-3] = {type: "line"};
            view.hideColumns([count-2]);
        }
    
        var options = {
        	vAxis: {title: "活動人数"},
        	seriesType: "bars",
        	series: s,
        	isStacked: true
        };
        var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
        chart.draw(view, options);
        var inverse_data = google.visualization.arrayToDataTable(rows2cols(result.chart_data));
        var table = new google.visualization.Table(document.getElementById('chart_table'));
        table.draw(inverse_data, null);
    
    }
    
    function search_statistic(call_back){
        var qr =   '&data[period]='+jq('#period').val()
                    +'&data[period_f]='+jq('#period_f').val()
                    +'&data[month]='+jq('#month').val()
                    +'&data[year]='+jq('#year').val()
                    +'&data[cc_type]='+jq('#cc_type').val()
                    +'&data[facility]='+jq('#facility').val()
                    +'&data[area]='+jq('#area').val()
                    +'&data[pref]='+jq('#pref').val()
                    +'&data[ocba_code]='+jq('#ocba_code').val()
                    +'&data[ocba_name]='+jq('#ocba_name').val();

            jq('#search_result').load('index.php?option=com_statistic&task=ajax_search&tmpl=component'+ encodeURI(qr),
             function(){
                format_table('#search_result');
                call_back();
             }
             );
    }
    
    function submit_ranking(call_back){
        var qr =   '&data[yfrom]='+jq('#yfrom_2').val()
                    +'&data[mfrom]='+jq('#mfrom_2').val()
                    +'&data[yto]='+jq('#yto_2').val()
                    +'&data[mto]='+jq('#mto_2').val()
                    +'&data[cc_type]='+jq('#cc_type').val()
                    +'&data[facility]='+jq('#facility_2').val()
                    +'&data[area]='+jq('#area_2').val()
                    +'&data[pref]='+jq('#pref_2').val();

            jq('#ranking_result').load('index.php?option=com_statistic&task=ajax_ranking&tmpl=component'+ encodeURI(qr), call_back);
    }

    function format_table(target){
        jq(target + ' td').each(function(){
            if(!isNaN(parseInt(jq(this).html()))){
                this.style.textAlign = "right";
            }
        });
    }
    
</script>
